<template>
  <div class="app-container">
    <el-row>
      <el-col :span="20" :xs="24">
        <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="用户ip" prop="userName">
            <el-input
              placeholder="ip"
              clearable
              v-model="user_info.user_name"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="image_get">下载</el-button>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="predictStateMonitor">效率监控</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      user_info: {
        user_name: '',
        token: '12345'
      },
      url: {
        download: 'http://192.168.31.200:50001/app/multidownload',
        predict: 'http://192.168.31.208:50001/app/preditstart',
        state_get: 'http://192.168.31.208:50001/app/longTaskStateGet'
      },
      state_monitor: {
        file_name: [],
        has_finished: false,
        state: ''
      },
      predict_choice: {
        enhance_choice: 0,
        segmentation_choice: 0,
        grade_choice: -1,
        vascular_choice: -1
      }

    }
  },
  mounted () {

  },
  methods: {
    // 获得处理好的东西
    image_download () {
      let param = new FormData()
      param.append('user_name', 'tacom')
      param.append('token', '12345')

      let config = {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; application/octet-stream' },
        responseType: 'blob'
      }
      axios.post(this.url.download,
        param, config
      ).then((res) => {
        const blob = new Blob([res.data], { type: 'application/zip' })
        // let decode_data = Base64.decode(res.data)
        let dispositon = decodeURI(res.headers['content-disposition'])
        let fileName = dispositon.substring(dispositon.indexOf('filename=') + 9, dispositon.length)

        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      }
      )
    },

    predictStateMonitor () {
      let param = new FormData()
      param.append('user_name', 'tacom')
      param.append('token', '12345')
      param.append('data', JSON.stringify(this.predict_choice))

      let config = {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      }
      let that = this

      axios.post(this.url.predict,
        param, config
      ).then((res) => {
        let json = res.data
        let redis_id = json['id']
        let result = json['result']
        if (result == false) {
          this.$modal.msgError('a task is processing, waiting!!!!')
          return
        }

        that.$modal.msgSuccess('request upload, waiting!!!')

        let time = setInterval(() => {
          let p = new FormData()
          p.append('redis_id', redis_id)
          axios.post(this.url.state_get, p, config).then(res => {
            let data = res.data
            data = data['message']
            let file_name = data['file_name']
            let has_finished = data['has_finished']
            let state = data['state']

            let change = false
            if (state.indexOf('error') !== -1) {
              this.$modal.msgError(state +
                ' predict process broken, please re-upload img and predict once more !!!' +
                'else upload img to us to debugger, Thanks!!!')
              clearInterval(time)
              return
            }

            if (state !== that.state_monitor.state) {
              that.state_monitor.state = state
              change = true
            }

            if (file_name != that.state_monitor.file_name) {
              that.state_monitor.file_name = file_name
              change = true
            }

            if (has_finished != that.state_monitor.has_finished) {
              that.state_monitor.has_finished = has_finished
              change = true
            }

            if (change) {
              that.$modal.msgSuccess(`processing_img: ${file_name}\n,
              processing_step: ${state}`)
            }

            if (has_finished) {
              this.$modal.msgSuccess('\n task has done')
              clearInterval(time)
            }
          })
        }, 1000)
      })
    }
  }
}
</script>

<style scoped>
  .app-container {
    padding: 20px;
  }
</style>
